// Colorful backgrounds that can be used across the app
#elixir-card {
  background: linear-gradient(40deg, $color-elixir, $color-elixir-accent);
  color: #fff;
}

#phoenix-card {
  background: linear-gradient(40deg, $color-phoenix, $color-phoenix-accent);
  color: #fff;
}

#app-card {
  background: linear-gradient(40deg, $color-dashboard, $color-dashboard-accent);
  color: #fff;
}

.bg-green {
  background-color: $color-green;
}

.bg-blue {
  background-color: $color-blue;
}

.bg-purple {
  background-color: $color-purple;
}

.bg-yellow {
  background-color: $color-yellow;
}

.bg-orange {
  background-color: $color-orange;
}

.bg-dark-gray {
  background-color: $color-dark-gray;
}

.bg-light-gray {
  background-color: $color-light-gray;
}

.bg-card-default {
  background-color: $color-white;
}

.bg-gradient-green {
  background: linear-gradient(40deg, $color-green, adjust-color($color-green, $lightness: +10%));
}

.bg-gradient-blue {
  background: linear-gradient(40deg, $color-blue, adjust-color($color-blue, $lightness: +10%));
}

.bg-gradient-purple {
  background: linear-gradient(40deg, $color-purple, adjust-color($color-purple, $lightness: +10%));
}

.bg-gradient-yellow {
  background: linear-gradient(40deg, $color-yellow, adjust-color($color-yellow, $lightness: +10%));
}

.bg-gradient-orange {
  background: linear-gradient(40deg, $color-orange, adjust-color($color-orange, $lightness: +8%));
}

.bg-gradient-dark-gray {
  background: linear-gradient(40deg, $color-dark-gray, adjust-color($color-dark-gray, $lightness: +10%));
}

.bg-gradient-light-gray {
  background: linear-gradient(40deg, $color-light-gray, adjust-color($color-light-gray, $lightness: +2%));
}
